<template>
    <div class="main-container">
        <zl-table ref="menuTable" :request-fun="this.api.system.getAllAdmins">
            <zl-table-column label="头像">
                <template slot-scope="scope">
                    <el-avatar size="large" :src="scope.row.userFace"></el-avatar>
                </template>
            </zl-table-column>
            <zl-table-column label="名称" prop="name"/>
            <zl-table-column label="账号" prop="username"/>
            <zl-table-column label="角色">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.roles" multiple collapse-tags value-key="id" filterable
                               @visible-change="(flag)=>{
                                   return roleBlur(flag,scope.row.id,scope.row.roles)
                               }"
                               @remove-tag="(data)=>{
                                   return roleRemoveTag(data,scope.row.id,scope.row.roles)
                               }"
                               placeholder="请选择">
                        <el-option
                                v-for="item in roles"
                                :key="item.id"
                                :label="item.name"
                                :value="item">
                        </el-option>
                    </el-select>
                </template>
            </zl-table-column>
            <el-table-column
                    label="是否禁用">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.isActive === 1"
                            @change="disableAdmin(scope.row)"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>
        </zl-table>
    </div>
</template>

<script>

import Message from "element-ui";
import {updateRoles} from "@/api/modules/system";

export default {
    name: "SysAdmin",
    data() {
        return {
            //接口api
            api: this.$store.getters.app.api,
            //所有角色
            roles: [],
            //记录修改角色前的角色
            blurRole:[]
        }
    },
    async mounted() {
        await this.init();
    },
    methods: {
        async init() {
            let res = await this.api.system.getRoles();
            if (res.code === 200) {
                this.roles = res.data
            }
        },
        //禁用账户
        async disableAdmin(data) {
            await this.api.system.disableAdmin({id: data.id, isActive: data.isActive === 0 ? 1 : 0})
            data.isActive = (data.isActive === 0 ? 1 : 0)
        },
        //当下拉框失去焦点
        async roleBlur(flag,userId,roles){
            //console.log(flag,userId,roles)
            if (!flag){
                if (roles && roles.length >0){
                    let flag = await this.changeRole(userId,roles,this.blurRole)
                    if (flag){
                        roles.splice(0,roles.length)
                        this.blurRole.forEach(e=>{
                            roles.push(e)
                        })
                    }
                }else {
                    this.$message.warning("不可移除所有角色！")
                    this.blurRole.forEach(e=>{
                        roles.push(e)
                    })
                }
            }else{
                this.blurRole = JSON.parse(JSON.stringify(roles))
            }
        },
        //当移除下拉框数据的时候触发
        async roleRemoveTag(data,userId,roles){
            if (!roles || roles.length<=0){
                this.$message.warning("不可移除所有角色！")
                roles.push(data)
            }else{
                let flag = await this.changeRole(userId,roles,[data])
                if (flag){
                    roles.push(data)
                }
            }
        },
        //修改角色权限
        async changeRole(userId,roles,oldData){
            let rids = roles.map(item => item.id).join(",")
            let res = await this.api.system.updateRoles({adminId:userId,rids:rids});
            if (res.code === 500){
                return true;
            }
        }
    },

}
</script>

<style scoped>

</style>